import React, {useState} from 'react';
import { forwardRef } from 'react';
import './index.scss';
import {MaterialRecord, MaterialTab} from "../material-management";

export interface InspectionItem {
  title: string;
  value: string | number;
  iconPath?: string;
}

export interface ThirdPartyInspectionProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;
  borderColor?: string;
  borderOpacity?: number;

  // 显示配置
  showData?: boolean;

  // 标签页配置
  activeTabBackground?: string;
  inactiveTabBackground?: string;
  activeTabTextColor?: string;
  inactiveTabTextColor?: string;

  // 统计数据配置
  stats?: Array<{
    label: string;
    value: string;
    unit?: string;
    showGradient?: boolean;
  }>;

  // 表格配置
  tableHeaders?: Array<{
    key: string;
    value: string;
    width: string;
  }>;
  records?: Array<{
    id: string;
    [key: string]: any;
  }>;
  headerTextColor?: string;
  recordTextColor?: string;
  incompleteStatusColor?: string; // 新增：未完成状态的字体颜色配置
  statValueColor?: string;
  statLabelColor?: string;
  showGradientText?: boolean;
  gradientColors?: string[];
  tableRowBackground?: string;
  theme?: string;

  // 上方区域配置
  inspectionItems?: InspectionItem[];
  itemSpacing?: number;
  itemWidth?: number;
  itemHeight?: number;

  // 标题配置
  titleFontSize?: number;
  titleColor?: string;
  titleFontFamily?: string;
  titleFontWeight?: number;
  titleLineHeight?: number;
  titleLetterSpacing?: number;

  // 数值配置
  valueFontSize?: number;
  valueColor?: string;
  valueFontFamily?: string;
  valueFontWeight?: number;
  valueLineHeight?: number;
  valueLetterSpacing?: number;
  valueBackground?: string;

  // 图标配置
  iconSize?: number;
  iconSpacing?: number;

  // 数据表格配置
  tableColumns?: any[];
  tableDataSource?: any[];
  tableHeight?: number;
  tableHeaderHeight?: number;
  tableRowHeight?: number;
  tableMaxRows?: number;
  tableShowHeader?: boolean;
  tableHeaderTextColor?: string;
  tableRowTextColor?: string;
  tableHeaderFontSize?: number;
  tableRowFontSize?: number;
  tableColumnSpacing?: number;
  tableShowBorder?: boolean;
  tableHoverRowColor?: string;
  tableSelectedRowColor?: string;
  tableEmptyText?: string;
  tableLoading?: boolean;
  tableTheme?: string;
  tableHeaderBackgroundImage?: string;
  tableHeaderBackgroundColor?: string;
  tableAlternateRowBackgroundColor?: string;

  // 事件
  onItemClick?: (item: InspectionItem, index: number) => void;
  onTableRowClick?: (record: any, index: number) => void;
  onTableRowDoubleClick?: (record: any, index: number) => void;
  onTableHeaderClick?: (column: any) => void;
  onTabClick?: (tab: any, index: number) => void;
  onRecordClick?: (record: any, index: number) => void;
  onClick?: () => void;

  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const ThirdPartyInspection = forwardRef<HTMLDivElement, ThirdPartyInspectionProps>((props, ref) => {
  const {
    width,
    height,
    showData,
    activeTabBackground = 'http://localhost:8085/static/images/qixiangfangzhai/bz149bf.png',
    inactiveTabBackground = 'http://localhost:8085/static/images/qixiangfangzhai/jxbf2.png',
    borderColor = '#3A4E74',
    backgroundColor = 'rgba(5,18,34,0.2)',
    stats = [
      { label: '物资类别', value: '20', showGradient: true },
      { label: '物资总数', value: '30', unit: '万件', showGradient: true },
      { label: '近半年到期物资数量', value: '30', unit: '万件', showGradient: true }
    ],
    tableHeaders = [
      { key: 'month', value: '月份', width: '15' },
      { key: 'address', value: '地点', width: '37' },
      { key: 'type', value: '问题分类', width: '30' },
      { key: 'expiring', value: '问题描述', width: '18' },
    ],
    records = [
      { id: '1', month: '07-01', address: '华阳老街是这里呀', type: '问题分类',  expiring: '问题描述'},
      { id: '2', month: '07-02', address: '地址', type: '问题分类', expiring: '问题描述' },
      { id: '3', month: '07-03', address: '地址', type: '问题分类', expiring: '问题描述' },
      { id: '4', month: '07-04', address: '地址', type: '问题分类', expiring: '问题描述' },
      { id: '5', month: '07-05', address: '地址', type: '问题分类', expiring: '问题描述' },
      { id: '6', month: '07-06', address: '地址', type: '问题分类', expiring: '问题描述' },
      { id: '7', month: '07-07', address: '地址', type: '问题分类', expiring: '问题描述' },
      { id: '8', month: '07-08', address: '地址', type: '问题分类', expiring: '问题描述' },
    ],
    activeTabTextColor = '#FFFFFF',
    inactiveTabTextColor = 'rgba(255,255,255,0.9)',
    headerTextColor = '#56A5FF',
    recordTextColor = 'rgba(255,255,255,0.9)',
    incompleteStatusColor = '#FFA500', // 默认未完成状态颜色为橙色
    statValueColor = '#1AD7FF',
    statLabelColor = '#FFFFFF',
    showGradientText = true,
    gradientColors = ['#FFFFFF', '#81C6FF'],
    tableRowBackground = 'rgba(16,85,163,0.18)',
    onTabClick,
    onRecordClick,
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px !important` : height,
    '--gradient-start': gradientColors[0] || '#FFFFFF',
    '--gradient-end': gradientColors[1] || '#81C6FF',
    '--border-color': borderColor,
    '--inactive-background': backgroundColor,
    '--table-row-background': tableRowBackground,
    ...style
  } as React.CSSProperties;
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const handleTabClick = (tab: MaterialTab, index: number) => {
    setActiveTabIndex(index)
    if (onTabClick) {
      onTabClick(tab, index);
    }
  };

  const handleRecordClick = (record: MaterialRecord, index: number) => {
    if (onRecordClick) {
      onRecordClick(record, index);
    }
  };

  const materialManagementClassName = ['third-party-inspection', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={materialManagementClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 数据统计 */}
      {showData && (
        <div className="chart-area">
          <div className="area-item" style={{backgroundImage: 'url(static/images/xiaofanganquan/xuncha-bg-blue.png)'}}>
            <div>排查问题</div>
            <div>1148</div>
          </div>
          <div className="area-item" style={{backgroundImage: 'url(static/images/xiaofanganquan/xuncha-bg-with.png)'}}>
            <div>复查问题</div>
            <div className="item-value">1148</div>
          </div>
        </div>
      )}
      {/* 表格区域 */}
      <div className="table-area" style={{height: showData ? 'calc(100% - 70px)' : '100%'}}>
        {/* 表头 */}
        <div className="table-header" style={{backgroundImage:`url(http://localhost:8085/static/images/qixiangfangzhai/bz54.png)`}}>
          {tableHeaders.map((head,value) => (
            <div
              className="header-cell"
              style={{ color: headerTextColor, width: `${head.width}%` }}
            >
              {head.value}
            </div>
          ))}
        </div>

        {/* 表格数据 */}
        <div className="table-body"  style={{height: 'calc(100% - 32px)'}}>
          {records.map((record, index) => (
            <div
              key={record.id}
              className="table-row"
              onClick={() => handleRecordClick(record, index)}
            >
              {tableHeaders.map((head) => {
                // 为"完成情况"列的"未完成"状态设置特殊颜色
                let cellColor = recordTextColor;
                if (head.key === 'completionStatus' && record[head.key] === '未完成') {
                  cellColor = incompleteStatusColor || recordTextColor;
                }
                
                return (
                  <div
                    key={head.key}
                    className="table-cell"
                    style={{ color: cellColor, width: `${head.width}%` }}
                  >
                    {record[head.key]}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
});

ThirdPartyInspection.displayName = 'ThirdPartyInspection';

export default ThirdPartyInspection;
